<template>
  <el-button @click="refreshTable">重置</el-button>
  <el-table
    :data="tableData"
    border
    highlight-current-row
    empty-text="正在加载中"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column width="55" align="center" type="selection"></el-table-column>
    <el-table-column prop="date" label="日期" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="address" label="操作" width="200" align="center">
      <template #default="scope">
        <el-icon class="icon-btn" :size="16" @click="editFn(scope.row)">
          <Edit />
        </el-icon>
        <el-icon class="icon-btn" :size="16" @click="deleteFn(scope.row)">
          <Delete />
        </el-icon>
      </template>
    </el-table-column>
  </el-table>

  {{ data }}
  <el-button @click="changeRef">change</el-button>
  <br />
  {{ data2 }}
  <el-button @click="changeName">changeName</el-button>
  <el-button @click="changeReactive">change</el-button>
</template>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
const tableData = ref([
  {
    date: '2016-05-03',
    name: '张三',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: '李四',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: '王五',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: '赵六',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const chooseData = ref([])

const editFn = (row) => {
  console.log(row)
}
const deleteFn = (row) => {
  console.log(row)
}
const refreshTable = () => {
  tableData.value = []
}
// 选择监听器
const handleSelectionChange = (val) => {
  chooseData.value = val
}

const data = ref({
  name: 'djh',
  aihao: ['1', '2'],
})
const changeRef = () => {
  data.value.name = 'haha'
  data.value.aihao.push('3')
}
let data2 = reactive({
  name: 'djh',
  aihao: ['1', '2'],
})
const changeName = () => {
  data2.name += '=='
}
const changeReactive = () => {
  // 失去了响应式
  data2 = {
    name: 'djh',
    aihao: ['1', '2'],
  }
}
</script>

<style scoped>
.icon-btn {
  padding: 10px;
  cursor: pointer;
}
</style>
